<template>
  <div class="dashboard-container">
	  <div class="role">
		  <div class="sea">
			  <div class="item">
				  <el-form label-width="">
					  <el-row :gutter="12">
						  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							  <el-form-item label="位 置">
								  <el-select v-model="localtion" clearable @change="search" style="width: 70%;" placeholder="请选择位置">
									  <el-option
										  v-for="(item,index) in localtionOptions"
										  :key="index"
										  :label="item.name"
										  :value="item.name">
									  </el-option>
								  </el-select>
							  </el-form-item>
						  </el-col>
						  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							  <el-form-item label="状态">
								  <el-select v-model="status" clearable @change="search" style="width: 70%;" placeholder="请选择状态">
									  <el-option
										  v-for="(item,index) in statusList"
										  :key="index"
										  :label="item.label"
										  :value="item.value">
									  </el-option>
								  </el-select>
							  </el-form-item>
						  </el-col>
						  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							  <el-form-item label="责任人">
								  <el-select v-model="own" clearable @change="search" style="width: 70%;" placeholder="请选择责任人">
									  <el-option
										  v-for="(item,index) in own_list"
										  :key="index"
										  :label="item.name"
										  :value="item.id">
									  </el-option>
								  </el-select>
							  </el-form-item>
						  </el-col>
						  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							  <el-form-item label="借用人">
								  <el-select v-model="receiveUser" clearable @change="search" style="width: 70%;" placeholder="请选择借用人">
									  <el-option
										  v-for="(item,index) in receive_list"
										  :key="index"
										  :label="item.name"
										  :value="item.id">
									  </el-option>
								  </el-select>

							  </el-form-item>
						  </el-col>

					  </el-row>
				  </el-form>
			  </div>
			  <div class="item">
				  <el-row :gutter="10">
					  <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="21">
						  <span>关键字:</span>
						  <el-input v-model="keywords" clearable placeholder="请输入关键字" style="width: 42%;" @change="search"></el-input>
						  <el-button type="primary" @click="search">查询</el-button>
					  </el-col>
					  <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="2" v-if="power.includes('prototype_add')">
						  <div style="display: flex;">
							  <el-button type="success" @click="down">导 出</el-button>
							  <el-button type="primary" @click="addForm">登 记</el-button>
						  </div>

					  </el-col>
				  </el-row>
			  </div>
		  </div>

		  <div class="tab">
			  <el-table
				  v-if="initTableList"
				  class="marT"
				  :data="initTableList.slice((current-1)*size, current*size)"
				  :border="true"
				  :header-cell-style="{background:'#eef1f6'}">
				  <el-table-column
					  align="center"
					  type="index"
					  label="序号"
					  width="50">
				  </el-table-column>
				  <el-table-column align="center" property="_id" label="样机ID" width="200"></el-table-column>
				  <el-table-column align="center" property="name" label="样机名称" width="200"></el-table-column>
				  <el-table-column align="center" property="hardware_version" label="硬件版本" width="200"></el-table-column>
				  <el-table-column align="center" property="model" label="样机model" width="200"></el-table-column>
				  <el-table-column align="center" property="did" label="样机DID" width="200"></el-table-column>
				  <el-table-column align="center" property="localtion" label="位置" width="200"></el-table-column>
				  <el-table-column align="center" property="status" label="状态" width="200">
					  <template slot-scope="scope">
						  <el-tag
							  :type="scope.row.status_show.length>=5?'success':
							  (scope.row.status_show.length>=4?'info':(scope.row.status_show.length>=3?
							  'primary':'warning'))" effect="dark">
							  {{scope.row.status_show}}
						  </el-tag>
					  </template>
				  </el-table-column>
				  <el-table-column align="center" property="own" label="责任人" width="200">
					  <template slot-scope="scope">
						  <span>{{getLeader(scope.row.own)}}</span>
					  </template>
				  </el-table-column>
				  <el-table-column align="center" property="recevie" label="借用人" width="200">
					  <template slot-scope="scope">
						  <span>{{getLeader(scope.row.recevie)}}</span>
					  </template>
				  </el-table-column>
				  <el-table-column align="center" property="own" label="创建者" width="200">
					  <template slot-scope="scope">
						  <span>{{getLeader(scope.row.creator_show)}}</span><br>
						  <span style="font-size: 10px;">{{getTime(scope.row.create_time)}}</span>
					  </template>
				  </el-table-column>
				  <el-table-column align="center" label="操作" fixed="right" width="200">
					  <template slot-scope="scope">
						  <span><a @click="toDetails(scope.row)">查看</a></span>
						  <span><a > | </a></span>
						  <span v-if="scope.row.can_sign == 1"><a >
							  <template>
								<el-popconfirm title="确认接收吗？" @confirm="sign(scope.row)">
									<span slot="reference" >接收确认</span>
								</el-popconfirm>
							  </template>
						  </a></span>
						  <span v-if="scope.row.can_sign == 1"><a  > | </a></span>
						  <el-dropdown :hide-on-click="false">
							  <span class="el-dropdown-link">
								<a >更多<i class="el-icon-arrow-down el-icon--right"></i></a>
							  </span>
							  <el-dropdown-menu slot="dropdown">
								  <el-dropdown-item v-if="scope.row.can_godown">
									  <a>
										  <template>
											  <el-popconfirm title="确认入库吗？" @confirm="godown(scope.row)">
												  <span slot="reference" class="del">入库</span>
											  </el-popconfirm>
										  </template>
									  </a>
								  </el-dropdown-item>
								  <el-dropdown-item v-if="scope.row.can_return == 1">
									  <a>
										  <template>
											  <el-popconfirm title="确认归还吗？" @confirm="returnPrototype(scope.row)">
												  <span slot="reference" class="del">归还</span>
											  </el-popconfirm>
										  </template>
									  </a>
								  </el-dropdown-item>
								  <el-dropdown-item><a @click="toBianji(scope.row)" v-if="scope.row.can_update == 1">编辑</a></el-dropdown-item>
								  <el-dropdown-item v-if="scope.row.status == 0"><a @click="returnForm(scope.row)">寄回</a></el-dropdown-item>
								  <el-dropdown-item><a @click="receive(scope.row)" v-if="scope.row.can_transfer == 1">借出</a></el-dropdown-item>
								  <el-dropdown-item><a @click="recode(scope.row)">操作记录</a></el-dropdown-item>
							  </el-dropdown-menu>
						  </el-dropdown>
					  </template>
				  </el-table-column>
			  </el-table>
			  <el-pagination
				  background
				  layout="prev, pager, next"
				  :page-size="tableSize"
				  @size-change="tableSizeChange"
				  @current-change="tableCurrentChange"
				  :current-page="tableCurrent"
				  style="text-align: center;height: 100px;"
				  :total="tableTotal">
			  </el-pagination>
		  </div>
		  <addForm ref="addForm"></addForm>
		  <seeForm ref="seeForm"></seeForm>
		  <receiveForm ref="receiveForm"></receiveForm>
		  <lineForm ref="lineForm"></lineForm>
		  <returnForm ref="returnForm"></returnForm>
	  </div>
  </div>
</template>

<script>
import addForm from "./components/addForm";
import seeForm from "./components/seeForm";
import receiveForm from "./components/receiveForm";
import lineForm from "./components/line";
import returnForm from "./components/returnForm";
import {prototype, sign, options, prototypeGodown, localtion, prototypeReturn} from '@/api/user'
import axios from "axios";
import { getHeaderName } from '@/app.config'
export default {
	name: 'Dashboard',
	components: {
		addForm,
		seeForm,
		receiveForm,
		lineForm,
		returnForm
	},
	data() {
		return {
			receiveUser:'',
			own:'',
			value: '',
			size: 10,
			current: 1,
			total: 0,
			initTableList: [],
			tableSize:10,
			tableCurrent:1,
			tableTotal:1,
			keywords:'',
			status:'',
			localtion:'',
			own_list:[],
			receive_list:[],
			localtionOptions:[],
			statusList:[],
			power:[],
			pending:false,
			statusShow:'info'
		}
	},
	mounted () {

	},
	created() {
		this.pending = this.$route.query.pending
		this.initTable()
	},
	methods: {
		// 样机入库
		godown(data){
			prototypeGodown(data.id).then(res => {
				if(res.status == 'success'){
					this.$message.success(res.message)
					this.initTable()
				}else {
					this.$message.error(res.message)
				}
			})
		},
		// 样机归还
		returnPrototype(data){
			prototypeReturn(data.id).then(res => {
				if(res.status == 'success'){
					this.$message.success(res.message)
					this.initTable()
				}else {
					this.$message.error(res.message)
				}
			})
		},
		// 下载样机列表结果
		down() {
			let path = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/prototype/export`
			axios.get(path,{
				responseType: 'blob',
				headers: getHeaderName()
			}).then(res => {
				if(res.status === 200) {
					const blob = new Blob([res.data]);
					const fileName = `样机列表.xls`;
					// for IE
					if (window.navigator && window.navigator.msSaveOrOpenBlob) {
						window.navigator.msSaveOrOpenBlob(blob, fileName)
					} else {
						// for Non-IE (chrome, firefox etc.)
						const elink = document.createElement('a');
						elink.download = fileName;
						elink.style.display = 'none';
						elink.href = URL.createObjectURL(blob);
						document.body.appendChild(elink);
						elink.click();
						URL.revokeObjectURL(elink.href);
						document.body.removeChild(elink);
						this.loading = false
						this.$message({
							type:"success",
							message:"导出成功!"
						})
					}
				} else {
					this.loading = false
					this.$message.error('下载出错了!');
				}
			}).catch((err) => {
				console.log(err.message);
			});
		},
		returnForm(data){
			this.$refs.returnForm.dialogFormVisible = true
			this.$refs.returnForm.initData(data)
		},
		getTime(data){
			if(data){
				var d = new Date(data);
				var d2 = d.getTime() - 8 * 60 * 60 * 1000
				d = new Date(d2)
				var  resDate = d.getFullYear() + '-' +
					((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
					(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
					(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
					(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
					(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());
				return resDate
			}else {
				return '暂无'
			}

		},
		search(){
			prototype({
				keywords:this.keywords,
				status:this.status,
				own:this.own,
				receive_user:this.receiveUser,
				localtion:this.localtion
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			prototype({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		initTable(){
			this.localtionOptions = []
			this.statusList = []
			prototype({
				pending:this.pending
			}).then(response => {
				if(response.code == 200){
					this.power = sessionStorage.getItem('power').split(',')
					this.initTableList = response.data.data;
					this.tableTotal = response.data.totalCount
				}
			})
			options().then(res => {
				this.receive_list = res.data.receive_list
				this.own_list = res.data.own_list
				this.statusList = res.data.status_list
			})
			localtion().then(res => {
				res.data.filter(item => {
					this.localtionOptions.push({name:item})
				})
			})
		},
		addForm(){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(1)
		},
		toBianji(data){
			this.$refs.seeForm.dialogFormVisible = true
			this.$refs.seeForm.initData(2,data)
		},
		toDetails(data){
			this.$refs.seeForm.dialogFormVisible = true
			this.$refs.seeForm.initData(3,data)
		},
		receive(data){
			this.$refs.receiveForm.dialogFormVisible = true
			this.$refs.receiveForm.initData(4,data)
		},
		sign(data){
			sign(data._id).then(res => {
				if(res.status == 'success'){
					this.$message.success(res.message)
					this.initTable()
				} else {
					this.$message.error('无权限操作！')
				}
			})
			this.initTable()
		},
		recode(data){
			this.$refs.lineForm.dialogFormVisible = true
			this.$refs.lineForm.initData(4,data)

		},
		getLeader(data){
			if(data){
				return data['name']
			}
			else {
				return '暂无'
			}
		}
	},
	computed: {
	},

}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}
	.sea{
		width: 100%;
		padding: 15px 0 0 15px;
		background-color: #fff;
		margin: 5px 0;
	}
	.el-col {
		border-radius: 4px;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	.bg-purple {
		background: #d3dce6;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
}
</style>
